<template>
<!-- 角色弹层 -->
   <div>
      <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
         <!-- 多选框组 checkbox-group 需要双向绑定数组-->
         <el-checkbox-group v-model="roleIds">
            <!-- 要循环的选项 -->
            <!-- label 是存储的值，无内容,即显示也存储 -->
            <!-- 要显示角色名称，存储角色id ，这里label 表示存储的值 就是点击的id-->
            <el-checkbox
               v-for="item in list"
               :key="item.id"
               :label="item.id"
            >
               {{ item.name }}
            </el-checkbox>
         </el-checkbox-group>
         <!-- 确定取消 -->
         <el-row type="flex" justify="center" slot="footer">
            <el-col :span="6">
               <el-button size="small" type="primary" @click="btnOK">
                  确定
               </el-button>
               <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
         </el-row>
      </el-dialog>
   </div>
</template>

<script>
import { getRoleList } from '../../../api/setting'
import { getUserDetailById } from '../../../api/user'
import { assignRoles } from '../../../api/employees'
export default {
   props: {
      // 角色弹出层
      showRoleDialog: {
         type: Boolean,
         default: false
      },
      // 用户的id，当前要处理的哪个用户
      userId: {
         type: String,
         default: null,
         required: true
      }
   },
   data() {
      return {
         // 所有角色列表
         list: [],
         // 存储当前用户所拥有的角色id
         roleIds: []
      }
   },
   created() {
      // 获取所有角色
      this.getRoleList()
   },
   methods: {
      // 获取所有角色
      async getRoleList() {
         // 默认取 10 条数据， 认为角色最多有20个角色，因为角色的数量不会太多
         const { rows } = await getRoleList({ page: 1, pagesize: 20 })
         // rows 要循环的记录
         this.list = rows
      },
      // 获取用户详情
      async getUserDetailById(id) {
         // 不能传 this.userId 因为props传值是异步的
         // 这个方法是给父组件调用的
         const { roleIds } = await getUserDetailById(id)
         //  将用户所拥有的角色赋值给当前用户的对象
         this.roleIds = roleIds
      },
      // 确定
      async btnOK() {
         await assignRoles({ id: this.userId, roleIds: this.roleIds })
         // 关闭弹层
         this.$emit('update:showRoleDialog', false)
         // this.$parent.showRoleDialog = false
         this.$message.success('分配角色成功')
      },
      // 取消
      btnCancel() {
         // 重置数据
         this.roleIds = []
         this.$emit('update:showRoleDialog', false)
      }
   }
}
</script>

<style lang="scss" scoped></style>
